<template>
  <PanerForm :isShowBarDrawer="true" :caption="'编辑注册信息'">
    <template #body>
      <div class="d-row">
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">名称标识</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.name" class="d-form-input" type="text" placeholder="输入英文、中划线、下划线，例：vue" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">中文名称</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.text" class="d-form-input" type="text" placeholder="输入中英文，例：vue框架" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">入口路径</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.path" class="d-form-input" type="text" placeholder="默认在packages目录下" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">版本</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.version" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">类型</label>
          </div>
          <div class="d-form-el">
            <select v-model="state.type" class="d-form-select">
              <option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.text }}</option>
            </select>
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">依赖项</label>
          </div>
          <div class="d-form-el">
            <Grid v-model="state.deps" ref="gridList" :isPagerAble="false">
              <GridColumn :width="60" type="index" label="序号" className="d-vm" />
              <GridColumn field="url" label="路径">
                <template v-slot:body="scope">
                  <FormInput v-model="scope.path" :title="scope.url" />
                </template>
              </GridColumn>
              <GridColumn field="action" :width="80" label="操作" className="d-vm">
                <template v-slot:body="scope">
                  <div class="d-bar-tools d-bar-tools-condensed d-grid-actions">
                    <a @click="handleAddDep" class="d-tools-item d-text-theme"><PlusIcon size="sm" /></a>
                    <a @click="handleDelDep(scope)" class="d-tools-item d-text-theme"><DeleteIcon size="sm" /></a>
                  </div>
                </template>
              </GridColumn>
              <template v-slot:empty>
                <div class="d-text-center">
                  <a class="d-text-linker" title="添加" @click="handleAddDep"><PlusIcon /></a>
                </div>
              </template>
            </Grid>
          </div>
        </div>
      </div>
      <div class="d-row">
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">描述</label>
          </div>
          <div class="d-form-el">
            <textarea v-model="state.description" class="d-form-textarea d-form-textarea-neat" rows="6"></textarea>
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">状态</label>
          </div>
          <div class="d-form-el">
            <select v-model="state.status" class="d-form-select">
              <option v-for="item in statusList" :key="item.id" :value="item.id">{{ item.text }}</option>
            </select>
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">标签</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.labels" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">排序</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.order" class="d-form-input" type="text" placeholder="数值越大越靠前" />
          </div>
        </div>
      </div>
    </template>
    <template #bar-drawer>
      <button @click="handleSubmit" class="d-btn d-btn-primary" type="button">提交</button>
      <button v-if="!isEdit" @click="handleReset" class="d-btn d-btn-default" type="reset">重置</button>
      <a v-d-goback class="d-btn d-btn-default">返回</a>
    </template>
  </PanerForm>
</template>

<script>
import { PanerForm } from '@daelui/vdog/dist/pages'
import { Dialoger, FormCalendar, FormSelecter, Tabs, TabsItem, Grid, GridColumn, FormButton, FormInput } from '@daelui/vdog/dist/components'
import { DeleteIcon, PlusIcon } from '@daelui/vdog/dist/icons'
import { zh as locale } from '@daelui/dogjs/dist/locale'
import { objecter, parser, strer } from '@daelui/dogjs/dist/components'
import { STATUS } from '@daelui/dogjs/dist/constant'
import { state } from '../../../service/stock/index.js'
import regSer from '../../../service/action/viewregister.action'

export default {
  components: {
    PanerForm,
    FormCalendar,
    Dialoger,
    FormSelecter,
    Tabs, TabsItem,
    Grid, GridColumn,
    FormButton,
    FormInput,
    DeleteIcon,
    PlusIcon
  },

  data () {
    return {
      STATUS,
      isEdit: false, // 是否是编辑模式
      activeView: 'first',
      activeProp: 'first',
      viewComp: 'div',
      propertyComp: 'div',
      // 表单数据
      state: {
        id: '',
        text: '',
        name: '',
        type: 'component',
        path: '',
        deps: [],
        description: '',
        version: '1.0.0',
        labels: '',
        status: 1,
        order: 1,
        updateTime: '',
        updateUser: '',
        createTime: '',
        createUser: ''
      },
      // 类型列表
      typeList: state.registerTypeList,
      // 状态列表
      statusList: state.statusList,
    }
  },

  methods: {
    /**
     * @function 加载数据
    */
    loadItem (id) {
      regSer.queryItem({ id }).then(result => {
        let data = result.data || {}
        let deps = parser.toObject(data.deps)
        deps = Array.isArray(deps) ? deps : []
        data.deps = deps
        this.state = data
      })
    },

    /**
     * @function 提交
    */
    handleSubmit () {
      let defer = null
      let state = objecter.clone(this.state)
      delete this.state.createTime
      state.deps = parser.stringify(state.deps)
      // 编辑
      if (this.isEdit) {
        defer = regSer.editItem(state)
      } else { // 添加
        defer = regSer.addItem(state)
      }
      defer.then(result => {
        if (result.success) {
          Dialoger.success(locale.action.success)
        } else {
          Dialoger.danger(locale.action.fail)
        }
        // 添加则回到列表页
        if (!this.isEdit) {
          this.$router.push(this.getMicroRoute('/dview/register/list'))
        }
      })
    },

    /**
     * @function 重置
    */
    handleReset () {},

    // 添加
    handleAddDep () {
      this.state.deps.push({
        id: strer.utid(),
        path: ''
      })
    },
    // 删除
    handleDelDep (item) {
      this.state.deps = this.state.deps.filter(node => {
        return item !== node
      })
    }
  },

  mounted () {
    let params = this.$route.params
    // 新建
    if (!params.id) {
      this.isEdit = false
    } else { // 编辑
      this.isEdit = true
      this.loadItem(params.id)
    }
  }
}
</script>

<style lang="less" scoped>
.d-form-label {
  width: 90px;
}
.coder-paner {
  /deep/.d-paner-item-content {
    height: 500px;
  }
}
.coder-preview {
  overflow: auto;
  padding: 8px;
  height: 536px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}
.preview-view {
  overflow: auto;
  height: 100%;
}
.btn-run {
  position: absolute;
  right: 0;
  top: 0;
}
</style>
<style lang="less">
.d-form-product .d-editor-container {
  height: 442px;
  .quill-editor {
    height: 400px
  }
}
</style>
